<template>
	<view style="position: relative;">
		<view class="redbg"></view>
			<view class="state">{{dataDetail.arrivalStatusStr}}</view>
				<text class="state-info" v-if="dataDetail.arrivalStatus===1">销售顾问会主动联系您，您也可以致电查询</text>	
				<view class="item" style="margin: 32upx;border-radius: 18upx;padding:32upx;">
					<view class="text-line1">
						<text >预约经销商: </text>
						<text>{{filterNull(dataDetail.reserveTenantName)}}</text>
					</view>
					<view class="line"></view>
					<view class="text-line2">
						<text >预约品牌/车系: </text>
						<text>{{filterNull(dataDetail.brandName) + " " + filterNull(dataDetail.seriesName)}}</text>
					</view>
					<view class="text-line2">
						<text >预约车型: </text>
						<text >{{filterNull(dataDetail.modelName)}}</text>
					</view>
					<view class="text-line2">
						<text >预约人: </text>
						<text >{{filterNull(dataDetail.contact)}}</text>
					</view>
					<view class="text-line2">
						<text >联系电话: </text>
						<text >{{filterNull(dataDetail.phone)}}</text>
					</view>
					<view class="text-line2">
						<text >提交时间: </text>
						<text >{{filterNull(dataDetail.reserveTime)}}</text>
					</view>
					<view class="text-line2">
						<text >预约门店: </text>
						<text >{{filterNull(dataDetail.reserveDeptName)}}</text>
						
					</view>
					<view class="text-line2">
						<text >门店地址: </text>
						<text >{{filterNull(dataDetail.reserveAddress)}}</text>
						
					</view>
					<view class="text-line2">
						<text style='min-width:128upx'>意向备注: </text>
						<text >{{filterNull(dataDetail.reserveContent)}}</text>
					</view>
					<view class="text-line2" v-if="false">
						<text >预约编号: </text>
						<text >{{filterNull(dataDetail.cluesId)}}</text>
					</view>
			
					
			<!-- 		<view class="text-line2">
						<text >预约经销商: </text>
						<text >{{filterNull(dataDetail.reserveDeptName)}}</text>
					</view> -->
			
					
			
				<!-- 	<view class="distance-wrap">
						<text style="font-size: 22upx;color: #999999;">距离</text>
						<text class="distance">{{filterNull(dataDetail.reserveDeptDistanceDesc)}}</text>
			
						<image src="../../../static/coupon/callPhone.png" mode="scaleToFill" style="margin-right: 40upx;"
							@click="makephone">
						</image>
						<image src="../../../static/coupon/map-navigation.png" mode="scaleToFill" @click="navi"></image>
					</view> -->
			
			
					<!-- 1.预约成功 2.已到店 3.无效 -->
					<view v-if="dataDetail.arrivalStatus===2">
						<view class="text-line2">
							<text >到店时间: </text>
							<text >{{filterNull(dataDetail.arrivalTime)}}</text>
						</view>
						<view class="text-line2">
							<text >服务顾问: </text>
							<text >{{filterNull(dataDetail.arrivalDealName)}}</text>
						</view>
					</view>
					
					<view v-else-if="dataDetail.arrivalStatus===3">
						<view class="text-line2">
							<text >是否到店: </text>
							<text >否</text>
						</view>	
						<view class="text-line2">
							<text >处理人: </text>
							<text >{{filterNull(dataDetail.arrivalDealName)}}</text>
						</view>	
						<view class="text-line2" >
							<text >处理时间: </text>
							<text >{{filterNull(dataDetail.arrivalDealTime)}}</text>
						</view>
						<view class="text-line2">
							<text >说明: </text>
							<text >{{filterNull(dataDetail.arrivalDesc)}}</text>
						</view>
			
						
					</view>
					
		</view>
		
	</view>
</template>

<script>
	import {
		cluessourcedriverinfo
	} from "../../../common/api.js"
	import {bMapToQQMap} from '@/util/index.js';

	export default {
		data() {
			return {
				cluesId: '',
				dataDetail: {},
				myLat: '',
				myLng: '',
			}
		},
		methods: { 
			getData() {
				cluessourcedriverinfo({
					params: {
						cluesId: this.cluesId,
						latitude: this.myLat,
						longitude: this.myLng,
					}
				}).then(res => {
					this.dataDetail = res;
				})
			},

			getLocation() {
				wx.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.myLat = res.latitude;
						this.myLng = res.longitude;
						this.getData()
					},
					fail: (e) => {
						this.getData()
					}
				})
			},

			navi() {
				let that = this;
				
				const qqLatLng = bMapToQQMap(that.dataDetail.reserveDeptLatitude*1, that.dataDetail.reserveDeptLongitude*1);
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function(res) {
				wx.openLocation({ //​使用微信内置地图查看位置。
					latitude: qqLatLng[0], //要去的纬度-地址
					longitude: qqLatLng[1], //要去的经度-地址
					name: that.dataDetail.reserveDeptName,
					address: that.dataDetail.reserveAddress
				})
				// 	}
				// })
			},

			makephone() {
				uni.makePhoneCall({
					phoneNumber: this.dataDetail.reserveDeptPhone
				})
			},



		},
		onLoad(op) {
			this.cluesId = op.cluesId;
			this.getData();
			this.getLocation();
		}
	}
</script>

<style lang="scss" scoped>
	.redbg{
		z-index: -99;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 300upx;
		background: linear-gradient(to right bottom, #EEF7FE, #D8ECFC, #F8F8F8 );
	}
.text-line1{
	font-size:28upx;
	color:#000000;
	font-weight:bold;
}
.line{
	width: 100%;
	border-bottom:1upx sold #F8F8F8 ;
	margin:24upx 0 32upx 0;
}
	.text-line2{
		margin:0 0 16upx 0;
		justify-content: flex-start;
		text{
			font-size:24upx;
			color:#666666;
		}
	}
	.state {
		font-size: 36upx;
		color: #173B42;
		font-weight: bold;
		padding: 32upx;
	}

	.state-info {
		font-size: 24upx;
		color: #469428;
		margin:0 32upx 32upx 32upx ;
	}

	.distance-wrap {
		@include flex;
		align-items: center;
		margin: 20upx 0;

		.distance {
			font-size: 26upx;
			color: #333333;
			font-weight: bold;
			flex-grow: 1;
			margin-left: 11upx;
		}

		image {
			width: 35upx;
			height: 35upx;
		}
	}
</style>
